<template>
    <div class="an-forgetpwd">
      <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step title="步骤 1" ></el-step>
        <el-step title="步骤 2" ></el-step>
        <el-step title="步骤 3" ></el-step>
      </el-steps>

      <div v-loading="loading">

        <div class="an-box" v-show="active===1">
          <el-alert
            title="请输入正确的账户邮箱，账号密码将以邮件的形式发送至邮箱！"
            type="warning"
          style="margin-bottom: 20px;">
          </el-alert>
          <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="80px">
            <el-form-item label="注册邮箱" prop="email">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="onSubmitNext('ruleForm')">下一步</el-button>
          </div>
        </div>

        <div class="an-box" v-show="active===2">
          <el-alert
            title="我们给您的邮箱发了一封验证码邮件，请填写收到的验证码。关闭网页失效！"
            type="warning"
            style="margin-bottom: 20px;">
          </el-alert>
          <el-form ref="ruleForm2" :rules="rules" :model="ruleForm2" :inline="true" label-width="80px" style="text-align: center">
            <el-form-item label="验证码" prop="code">
              <el-input v-model="ruleForm2.code"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendCode" :disabled="BtnSend">{{Btntime}}</el-button>
            </el-form-item>
          </el-form>
          <div style="text-align: center">
            <el-button type="primary" @click="onSubmitNext2('ruleForm2')">下一步</el-button>
          </div>
        </div>

        <div class="an-box" v-show="active===3">
          <el-alert
            title="发送成功！"
            type="success"
            description="账号和密码已经发送至您邮箱，请及时查收并修改密码！"
            show-icon
            style="margin-bottom: 20px;">
          </el-alert>

          <div style="text-align: center">
            <el-button type="primary" @click="onClickLogin">马上登录</el-button>
          </div>

        </div>


      </div>


    </div>
</template>

<script>
  import {forgetpwdemailselect,sendemail,forgetpwdemail} from '@/api/data'
    export default {
        name: "forgetpwd",
      data(){
          return{
            loading:false,
            active:1,
            ruleForm:{
              email:'',
            },
            ruleForm2:{
              code:'',
            },
            rules: {
              email: [
                { required: true, message: '请输入邮箱地址', trigger: 'blur' },
                { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
              ],
              code:[
                { required: true, message: '请输入验证码', trigger: 'blur' },
              ],
            },
            code:'', // 生成验证码
            BtnSend:false,  //按钮禁用
            times:0, //倒计时时间
            Btntime:'重新发送', //倒计时
          }
      },
      mounted(){

      },
      methods:{
        onSubmitNext(formName){
          this.$refs[formName].validate((valid) => {
            if (valid) {

              let nd = this.ruleForm.email;
              this.loading = true;
              let _this = this;
              forgetpwdemailselect(nd).then(res=>{
                this.loading = false;
                let cd = res.data;
                if(cd!=1){
                  this.$message.error('该邮箱暂未注册！');
                  return;
                }
                _this.sendCode();
                _this.next();
              });


            }
          });

        },
        sendCode(){  //生成验证码并发送
          this.times = 60;  //设置按钮倒计时时间
          this.onBtntime();
          let num = Math.floor(Math.random()*1000000);
          this.code = num;
          let email = this.ruleForm.email;
          console.log(num);
          sendemail(email,num).then(res=>{
            console.log(res);
          });
        },
        onBtntime(){ //倒计时
          let _this = this;
          this.BtnSend = true;
          let num = this.times;
          let msg;
          if(num>1){
            num = num - 1;
            msg = num +'S后重新发送';
            this.BtnSend = true;
            this.times = num;
            setTimeout(function () {
              _this.onBtntime();
            },1000);
          }else{
            this.BtnSend = false;
            msg = '重新发送';
          }
          this.Btntime = msg;

        },
        onSubmitNext2(formName){
          let cod = this.ruleForm2.code;
          let email = this.ruleForm.email;
          this.$refs[formName].validate((valid) => {
            if (valid) {

              if(this.code == cod){
                this.loading = true;
                forgetpwdemail(email).then(res=>{
                  this.loading = false;
                  this.next();
                  console.log(res);
                })
              }else{
                this.$message.error('验证码错误！');
              }

            }
          });
        },
        next(){
          if (this.active++ > 2) this.active = 0;
        },
        onClickLogin(){
          this.$router.push({path:'/login'})
        }
      }
    }
</script>

<style lang="scss" scoped>
.an-forgetpwd{
  padding: 50px 20px;
  .an-box{
    width: 550px;
    margin: 0 auto;
    padding-top: 50px;
  }
}

</style>
